@import '../../common/variables';
@import '../../common/colors.scss';

.ReactPasswordStrength {
  .ReactPasswordStrength-input {
    width: 100%;
    font-size: 12px;
    font-family: $font-family-base;
    padding: 2px 30px 2px 6px;
    font-style: normal;
  }

  .ReactPasswordStrength-strength-desc {
    padding: 2px 10px;
    right: -62.5%;
    font-size: 12px;
    width: 60%;
    text-align: left;
    font-style: normal;
    font-family: $font-family-base;

    @media (max-width: $screen-sm-max) {
      right: auto;
      top: 30px;
    }
  }
}

#password_react {
  .form-group.has-error .ReactPasswordStrength-input {
    border: 1px solid $pf-red-100;
  }

  .is-strength-0 {
    .ReactPasswordStrength-strength-desc {
      color: $pf-red-200;
    }

    .ReactPasswordStrength-strength-bar {
      background: $pf-red-200;
    }
  }

  .is-strength-1 {
    .ReactPasswordStrength-strength-desc {
      color: $pf-orange-400;
    }

    .ReactPasswordStrength-strength-bar {
      background: $pf-orange-400;
    }
  }

  .is-strength-2 {
    .ReactPasswordStrength-strength-desc {
      color: $pf-gold-400;
    }

    .ReactPasswordStrength-strength-bar {
      background: $pf-gold-400;
    }
  }

  .is-strength-3 {
    .ReactPasswordStrength-strength-desc {
      color: $pf-green-400;
    }

    .ReactPasswordStrength-strength-bar {
      background: $pf-green-400;
    }
  }

  .is-strength-4 {
    .ReactPasswordStrength-strength-desc {
      color: $pf-green-600;
    }

    .ReactPasswordStrength-strength-bar {
      background: $pf-green-600;
    }
  }
}
